// 首页分类区api

var xhr = new XMLHttpRequest();  //全局xhr对象

var server_url = "https://pcapi-xiaotuxian-front.itheima.net"  // 生产服务器

var classes = document.querySelectorAll(".iot_item_detail")

// 封装清洗数据的函数，只能提取出result中的数据数组，因为每个响应格式不一样
var draw_data = (res) => {
    res = JSON.parse(res)
    let datas = res.result // 提取出datas数组
    return datas
}

// 封装get的ajax请求并渲染,api为字符串
var get_ajax_render = (api) => {

    xhr.addEventListener("readystatechange", function () {
        if (this.readyState === 4) {
            // console.log(this.responseText)  //显示响应内容原文
            let datas = draw_data(this.responseText) //调用清洗函数，提取出data数组       
            let data = datas[0]
            data = data.children
            // console.log(data)
            for (let i = 0; i < data.length; i++) {
                let len = data[i].goods.length
                for (let j = 0; j < len; j++) {
                    let good = data[i].goods
                    good = good[j]
                    // 创建一个新的元素  
                    var newDiv = document.createElement("div");
                    newDiv.className = "iot_item_wrap"
                    newDiv.innerHTML = `
                            
                            <div class="iot_detail_img"><img src="${good.picture}"></div>
                            <div class="iot_detail_text">${good.name}</div>
                            <div class="iot_detail_price">${good.price}</div>
                            
                    `;
                    // 将新元素添加到父元素中  
                    classes[i].appendChild(newDiv);
                }
            }
        }
    });
    xhr.open("GET", server_url + api, true);
    // 发送请求
    xhr.send();
}


const class_api = "/category/top"  //分类

get_ajax_render(class_api)









